<template>
  <div class="about">

    <div 
    contenteditable="true"
      @keyup="handleMessageInput"
      @compositionend="onCompositionEnd"
     
      style="width:200px;height: 200px;border: 1px solid red;">
    </div>
    <input style="width: 100px;" />
    <div class="title">This is an about page</div>
    <button @click="handleClick">test</button>
    <div class="content">
      <div class="article">
        <a></a>
        <span>{{ state.count }}</span>
    <p @click="add">点我+1</p>
    <p @click="minus">点我-1</p>

    <p @click="addStorage">addstore</p>
    <p @click="getStorage">getStore</p>

    <p>{{ result }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getBanner } from '@/apis/index';

import { VITE_SERVER_BASE_URL } from '@/config';

import {useCounters} from '@/hooks/useCounter'

import useTitle from '@/hooks/useTitle'

import useCountdown from '@/hooks/useCountdown'

import {addLocalStorage,getLocalStorage} from '@/localstorage/storageHandle'
import { onMounted } from 'vue';

const handleStorage = (event:any) => {
  console.log(event)
  if (event.key === 'myKey') {
   console.log(111)
  }
};

onMounted(() => {
  window.addEventListener('setItemEvent', handleStorage);
});

const initCount =10
const { state,add,minus} = useCounters(initCount)


const result = useCountdown(60)

console.log(111,result)

const onCompositionEnd =(e)=>{
  console.log(e)
}

const handleMessageInput=()=>{
  console.log('sss')
}

const addStorage =()=>{

  addLocalStorage('test','test')
}

const getStorage =()=>{
  const result = getLocalStorage('test')
  console.log(result)
}

console.log(state)

const handleClick = async()=>{

  console.log(VITE_SERVER_BASE_URL)

  const res = await getBanner();
  console.log(res)
}



</script>

<style  lang="scss">

@import './about.scss';


.about{

  .content{
    $width: 800px;
    height: 400px;
    width: $width;
    font-size: 40px;
    line-height: 100px;
    .article  {
      height: 200px;
      @include bore-radius;
    
    }
    .article p{
      color: blue;
    }
    a::before{
      content: '**';
    }
    a::after{
      content: '**';
    }
  }

}


</style>
